Image Player

Adding the Image Playback Widget

This will playback the content in the image player.

Get Started

Step 1:  Add the following HTML tag into the body section of your Web App code to add the Image Playback widget.

<vdz-mashup-image data-widget="true" mashup-id={mashup-id}> </vdz-mashup-image>

Other available input properties can be found below.

Note: Make sure data-widget is set to true as this applies the VIDIZMO default styling to the widget.

Note: Make sure id attribute is unique and the same id is passed into the methods and mashup-id is of the content that you want to play.

Step 2:  Add the following Script tag into the body section of your web application code by making a function inside the script tags to call widget methods. A sample method can be seen as follows

<script>
    function setZoomLevel() {
        document.querySelector('image-player').setZoomLevel(10);
    }
    function setAnnotation() {
        document.querySelector('image-player').setAnnotation(true);
    }
</script>

Other available methods can be found below.

Step 3:  Add the following Script tag into the body section of your web application code to bind the events and see these events in the console.

<script>
    document
    .querySelector('image-player')
        .addEventListener('on-initialized', (evt) => {
        console.log(evt.type + ': ', evt.detail);
        });

    document
    .querySelector('image-player')
        .addEventListener('on-rotated', (evt) => {
        console.log(evt.type + ': ', evt.detail);
        });
</script>

Other available events can be found below.

Input properties for Image Playback Widget

Property	Type	Default	Required	Description
mashup-id	string	-	yes	Id corresponding to the unique content in user's portal

Methods for Image Playback Widget

Method	Params	Data Type	Return Type	Description
setZoomLevel	factor	number	void	Sets the zoom percentage for the image being played
setQualityLevel	quality	number	void	Sets the image quality level from the available renditions
setAnnotation	status	boolean	void	Sets whether or not to display annotations on an image

Output Events for Image Playback Widget

Event Name	Data	Type	Scenario
on-mashup-loading	searchCriteria	-	When a mashup search is being sent to the server, search criteria are received as event data.
on-mashup-loaded	mashupInfo	-	When the mashup search call is successful, mashInfo of fetched mashup is received as event data.
on-mashup-loading-failed	error	HttpErrorResponse	When the mashup search call has failed, error info is received as event data.
on-mashup-not-found	searchCriteria		When mashup search call couldn't find any mashup against searchcriteria
on-content-in-processing	-	-	When the playback file is in the state of processing
on-content-in-processing-failed	-	-	When the mashup content processing failed.
on-password-required	-	-	When mashup is protected by the password. When this event is raised, a form will be shown on the screen where the user will be able to enter a password.
on-password-validated	validationStatus	boolean	When the password validation process has been completed.
on-initializing	-	-	This will be raised before loading the player.
on-initialized	-	-	This will be raised when the player has loaded.
on-quality-changed	playbackQuality	string	This event is raised when quality is changed inside the player.
on-timed-data-visibility-changed	IsTimedDataVisible	boolean	This event is raised when timed data visibility i.e., annotation visibility is changed.
on-error	error	object	Raised when an error occurs in the video player.
on-dragged	coordinates	string	When the image has been dragged inside the player, this event will be raised.
on-fullscreen-changed	isFullscreen	boolean	When the player goes into or exits from Fullscreen.
on-rotated	angle	number	When the player has rotated the document along an angle.
on-zoom-changed	zoomedFactor	number	When the player has zoomed in or out of the document.
on-reset	-	-	When the player has reset to its original state.

Interceptors

VIDIZMO lets consumers of the widgets intercept the rendering pipeline and make changes in the data.

Property	Params	Description
searchCriteria		A function that is invoked when a mashup search from the server is about to be initiated.
on-mashup-loaded-sync	mashupInfo	A function that is invoked when a mashup search from the server has been successfully completed.
on-mashup-loading-failed-sync	error	A function that is invoked when a mashup search from the server has failed.